<!-- 车辆管理 -->
<template>
  <div class="dashboard-container driver customer-list-box">
    <div class="app-container">
      <!-- 头部搜索栏 -->
      <el-card>
        <el-form
          ref="searchForm"
          :model="headerForm"
        >
          <!-- 司机账号 -->
          <el-form-item
            label="司机账号:"
            label-width="100px"
          >
            <el-input
              v-model.trim="headerForm.account"
              placeholder="请输入司机账号"
              style="width:300px"
            ></el-input>
          </el-form-item>
          <!-- 司机姓名 -->
          <el-form-item
            label="司机姓名:"
            label-width="100px"
          >
            <el-input
              v-model.trim="headerForm.name"
              placeholder="请输入司机姓名"
              style="width:300px"
            ></el-input>
          </el-form-item>
          <!-- 司机手机号 -->
          <el-form-item
            label="司机手机号:"
            label-width="100px"
          >
            <el-input
              v-model.trim="headerForm.phone"
              placeholder="请输入司机手机号"
              style="width:300px"
            ></el-input>
          </el-form-item>
          <!-- 所属机构 -->
          <el-form-item
            label="所属机构:"
            label-width="100px"
          >
            <el-select
              ref="elTree"
              v-model="jigouTree"
              placeholder="请输入所属机构"
              style="width:300px"
              clearable
              @clear="clearSelect"
            >
              <el-option
                v-for="item in TreeList"
                :key="item.id"
                :value="item.id"
                :label="item.name"
                style="display:none;"
              ></el-option>
              <el-tree
                :data="TreeList"
                :props="defaultProps"
                node-key="id"
                highlight-current
                check-on-click-node
                current-node-key="id"
                @node-click="nodeClick"
              ></el-tree>
            </el-select>
          </el-form-item>
          <!-- 搜索 -->
          <el-form-item label-width="30px">
            <el-button
              type="warning"
              style="width:90px;height:40px"
              @click="searchBtn"
            >搜索</el-button>
            <el-button
              style="width:90px;height:40px"
              @click="resetBtn"
            >重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <!-- 主体表格 -->
      <el-card style="margin-top:20px;text-align:center;">
        <el-table
          v-loading="loading"
          element-loading-text="加载中"
          :data="sijiList"
          style="width:100%;margin-bottom:10px"
        >
          <el-table-column
            align="center"
            label="序号"
            width="100px"
            type="index"
          >
            <template slot-scope="scope">
              <span>{{
                scope.$index + (headerForm.page - 1) * headerForm.pageSize + 1
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="account"
            align="center"
            label="司机账号"
            width="200px"
          ></el-table-column>
          <el-table-column
            prop="name"
            align="center"
            label="司机姓名"
            width="150px"
          ></el-table-column>
          <el-table-column
            prop="mobile"
            align="center"
            label="司机电话"
            width="200px"
          ></el-table-column>
          <el-table-column
            prop="truck.licensePlate"
            align="center"
            label="关联车辆"
            width="220px"
          ></el-table-column>
          <el-table-column
            prop="agency.name"
            align="center"
            label="所属机构"
            width="220px"
          ></el-table-column>
          <el-table-column
            prop="workStatus"
            align="left"
            label="工作状态"
            width="220px"
          >
            <template #default="{row}">
              <span
                :class="{ 'stop-use': row.workStatus === 0, 'tableColumn-status': row.workStatus !== null}"
              >
                {{ workStatuss[row.workStatus] }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="操作"
            fixed="right"
            width="150px"
          >
            <template #default="{row}">
              <el-button
                type="text"
                @click="viewsBtn(row.userId)"
              >查看</el-button>
              <el-button
                type="text"
                @click="peizhiCarBtn(row.userId)"
              >配置车辆</el-button>
            </template>
          </el-table-column>
          <!-- 表格内容为空时展示的 -->
          <template slot="empty">
            <img
              src="@/assets/icon-empty.png"
              style="width:336px;height:232px"
            >
            <p>没有您要找的内容哦~</p>
          </template>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
          :page-size="headerForm.pageSize"
          :current-page.sync="headerForm.page"
          :page-sizes="[2, 4, 6, 8, 10]"
          @current-change="currentChange"
          @size-change="sizeChange"
        >
        </el-pagination>
      </el-card>
      <!-- 车辆配置弹窗 -->
      <el-dialog
        :visible.sync="dialogShow"
        title="车辆配置"
        width="420px"
      >
        <div>配置车辆需要满足以下条件:</div>
        <div style="display:flex;flex-wrap:wrap">
          <span style="margin-right:auto">1 司机信息已完善</span>
          <span>2 司机已设置排班</span>
          <span>3 司机绑定车辆未在启用状态</span>
        </div>
        <template #footer>
          <el-button
            size="mini"
            @click="dialogShow = false"
          >取消</el-button>
          <el-button
            size="mini"
            type="warning"
            style="width:56px;height:28px"
            @click="btnOK"
          >确定</el-button>
        </template>
      </el-dialog>
      <!-- 配置车辆弹窗 -->
      <carConfigVue
        :dialog-visible.sync="dialogVisible"
        :user-id="userId"
        :siji-list="sijiList"
      >
      </carConfigVue>
    </div>
  </div>
</template>
<script>
import { businessHallTree, driverList } from '@/api/transit'
import carConfigVue from './components/car-config.vue'
export default {
  name: 'Courses',
  components: {
    carConfigVue
  },
  data() {
    return {
      loading: true,
      jigouTree: '', // 机构树形的假数据
      dialogShow: false,
      dialogVisible: false,
      userId: null,
      TreeList: [],
      pages: 0,
      counts: 0,
      sijiList: [],
      workStatuss: {
        1: '上班',
        0: '休息'
      },
      headerForm: {
        page: 1,
        pageSize: 10,
        agentId: '', // id
        account: '', // 账号
        name: '', // 姓名
        phone: '' // 手机号
      },
      defaultProps: {
        label: 'name'
      }
    }
  },
  created() {
    this.businessHallTree()
    this.driverList()
  },
  methods: {
    // 清空下拉列表
    clearSelect() {
      this.headerForm.agentId = ''
    },
    // 重置
    resetBtn() {
      this.headerForm = {
        page: 1,
        pageSize: 10,
        agentId: '', // id
        account: '', // 账号
        name: '', // 姓名
        phone: '' // 手机号
      }
      this.jigouTree = ''
      this.driverList()
    },
    // 搜索
    searchBtn() {
      this.headerForm.page = 1
      this.driverList()
    },
    // 配置车辆按钮
    peizhiCarBtn(id) {
      this.dialogShow = true
      this.userId = id
    },
    // 确定按钮
    btnOK() {
      this.dialogVisible = true
      this.dialogShow = false
    },
    // 获取树状机构信息
    async businessHallTree() {
      this.loading = true
      const { data } = await businessHallTree()
      this.TreeList = JSON.parse(data)
      this.$nextTick(() => {
        this.loading = false
      })
    },
    // 树形节点被点击时的回调
    nodeClick(e) {
      this.headerForm.agentId = e.id
      this.$refs.elTree.blur()
      this.jigouTree = e.name
    },
    // 获取司机分页数据
    async driverList() {
      this.loading = true
      const {
        data: { items, pages, counts }
      } = await driverList(this.headerForm)
      this.sijiList = items
      this.counts = +counts
      this.pages = +pages
      this.$nextTick(() => {
        this.loading = false
      })
    },
    // 页码数改变触发，根据第几页 获取对应数据
    currentChange(page) {
      this.page = page
      this.driverList()
    },
    // 每页条数改变触发，修改每页条数，重新加载
    sizeChange(num) {
      this.headerForm.pageSize = num
      this.page = 1
      this.driverList()
    },
    // 跳转到查看司机详情页
    viewsBtn(userId) {
      this.$router.push(`/transit/driver-detail/${userId}`)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-dialog__body {
  div {
    margin-bottom: 10px;
    span {
      margin-bottom: 10px;
    }
  }
}
::v-deep .el-card__body {
  margin-bottom: 20px;
}
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 40px;
}
// 下拉框
::v-deep .el-select {
  width: 100%;
}

::v-deep .el-card {
  overflow: initial;
}
.app-container {
  padding: 20px;
  background: #f3f4f7;
  padding-top: 23px;
}
.el-form-item {
  margin-right: 25px;
  display: inline-block;
}
</style>
